<%@ page language="java" contentType="text/html; utf-8" pageEncoding="utf-8" %>
<!DOCTYPE HTML>
<html>
<head>
    <title>查看所有管理员</title>

    <link href="${pageContext.request.contextPath}/layui/css/layui.css" type="text/css" rel="stylesheet">
    <%--layui设置table行高度的方法--%>
    <style type="text/css">
        .layui-table-cell {
            height: auto;
            line-height: 28px;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/1.10.0/jquery.js"></script>
    <script src="${pageContext.request.contextPath}/layui/layui.js" type="text/javascript"></script>

    <script type="text/javascript">

        layui.use('table', function () {
            var table = layui.table;
            //执行一个laypage实例
            table.render({
                elem: "#myTable",//写id选择器
                url: "${pageContext.request.contextPath}/admin/listAdmin",//数据接口，请求的地址
                width: 1230,
                page: true,//开启分页

                //开启table表格头部的工具栏区域
                toolbar: '#myToolbar',//id选择器

                //列
                cols: [[
                    {type: "checkbox"},
                    {title: "管理员编号", field: "id"},
                    {title: "管理员名称", field: "username"},
                    {title: "管理员密码", field: "password"},
                    {title: "操作", templet: "#caozuo"}

                ]]
            });
        });

        /*------layui.use开始 表单验证-----*/
        layui.use(['form', 'table'], function () {
            var form = layui.form;
            var table = layui.table;
            //当点击提交按钮的时候，会进入到这个函数
            //当所有的验证都通过时，才会进入到这个函数
            //--------------------add-----------
            form.on("submit(add)", function (data) {
                console.log("------1----" + data);

                $.ajax({
                    url: "${pageContext.request.contextPath}/admin/insertAdmin",
                    data: data.field,
                    type: "post",
                    success: function (data) {
                        //console.log(data)
                        //1.关闭掉添加弹出层
                        layer.closeAll('page');

                        //2.提示添加成功
                        if (data.insertAdmin) {
                            layer.alert("添加成功", {time: 2000});
                        } else {
                            layer.alert("添加失败", {time: 2000});
                        }

                        //3.刷新table
                        table.reload("myTable");


                    }
                });
                return false;//阻止跳转；
            })
            //-------update----------
            //3.表单验证 见上面
            //4.把修改后的数据通过ajax请求响应到页面中...关闭弹出层，提示修改信息，刷新table表格
            form.on("submit(update)", function (data) {
            //    console.log("------1----" + data);

                $.ajax({
                    url: "${pageContext.request.contextPath}/admin/updateAdmin",
                    data: data.field,
                    type: "post",
                    success: function (data) {
                        console.log(data)
                        //1.关闭掉修改弹出层
                        layer.closeAll('page');

                        //2.提示添修改成功
                        if (data.updateAdmin) {
                            layer.alert("修改成功", {time: 2000});
                        } else {
                            layer.alert("修改失败", {time: 2000});
                        }

                        //3.刷新table
                        table.reload("myTable");


                    }
                });
                return false;//阻止跳转；
            })
            /*-----update结束-------*/

        })
        /*------layui.use结束-----*/


        //搜索操作
        function doSearch() {
            //1.得到input输入框中的值
            var username = $("#username").val();
            //2.发送请求，接受数据
            //使用table模块
            layui.use('table', function () {
                var table = layui.table;
                //reload方法完成数据的重新加载
                table.reload("myTable", {
                    where: {"name": username}//发送的额外参数
                })
            })
        }

        //打开添加弹出框
        function toOpenAddLayer() {
            $("#updateSubmitBtn").hide();
            $("#addSubmitBtn").show();
            layui.use('layer', function () {
                var layer = layui.layer;
                layer.open({
                    title: "添加管理员对象",
                    content: $("#addForm"),
                    type: 1,
                    maxmin: true
                });
            });
        }

        //修改操作 点击修改的按钮，去执行修改相应的方法
        function toOpenUpdateLayer(id) {
            //   alert(id);
            /*1.获取当前行数据--通过ajax向后发送请求，获取当前行数据
            2.把数据填充到修改弹出层中--弹出层显示
            3.表单验证
            4.把修改后的数据通过ajax请求响应到页面中...关闭弹出层，提示修改信息，刷新table表格
            * */
            //1
            $.ajax({
                url: "${pageContext.request.contextPath}/admin/selectAdminById",
                data: "id=" + id,
                success: function (data) {
                    $("#adminId").val(data.id);
                    $("#adminName").val(data.username);
                    $("#adminPwd").val(data.password);
                }
            })
            $("#updateSubmitBtn").show();
            $("#addSubmitBtn").hide();
            //2
            layui.use('layer', function () {
                var layer = layui.layer;
                layer.open({
                    title: "修改管理员信息",
                    content: $("#addForm"),
                    type: 1,
                    maxmin: true
                });
            });
        }

        //删除一个科室对象
        function deleteOne(id) {
            // alert(id);
            layui.use("table", function () {
                //获取table,用于下面重新加载表格信息，也即是刷新
                var table = layui.table;

                if (confirm("确认要删除吗？")) {
                    $.ajax({
                        url: "${pageContext.request.contextPath}/admin/multiDeleteAdmin",
                        data: "ids=" + id,
                        success: function (data) {
                            alert("删除成功！");
                            table.reload("myTable");
                        }
                    })
                }
            })
        }


    </script>

    <script type="text/html" id="caozuo">
        <button type="button" class="layui-btn-sm layui-btn-radius layui-btn-normal" onclick="toOpenUpdateLayer('{{d.id}}')">修改</button>
        <button type="button" class="layui-btn-sm layui-btn-radius layui-btn-danger" onclick="deleteOne('{{d.id}}')">删除</button>
    </script>

</head>

<body>
<%--table表格放在body最上面--%>
<table id="myTable"></table>

<%--templet选择器--%>
<div id="myToolbar" style="display: none">
    <%--给添加的弹出层加一个点击事件--%>
    <button type="button" class="layui-btn-sm layui-btn-radius layui-btn-normal" onclick="toOpenAddLayer()">
        <i class="layui-icon">&#xe608;</i> 添加
    </button>

    <%--组装行内表单--%>
    <div class="layui-inline">
        <div class="layui-input-inline" style="width: 200px;">
            <input type="text" class="layui-input" placeholder="请输入管理员名称" id="username">
        </div>
        <div class="layui-input-inline" style="width: 100px;">
            <button type="button" class="layui-btn-sm layui-btn-radius layui-btn-normal" onclick="doSearch()">
                <i class="layui-icon layui-icon-search"></i> 搜索
            </button>
        </div>
    </div>
</div>

<%--模态框开始--%>
<form class="layui-form" id="addForm" style="display:none">
    <input type="hidden" readonly name="id" id="adminId" autocomplete="off"/>
    <div class="layui-form-item">
        <label class="layui-form-label">管理员名称</label>
        <div class="layui-input-block">
            <input type="text" name="username" id="adminName" placeholder="请输入管理员名称" autocomplete="off"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">管理员密码</label>
        <div class="layui-input-block">
            <input type="text" name="password" id="adminPwd" placeholder="请输入管理员密码" autocomplete="off"/>
        </div>
    </div>

    <div class="layui-btn-group">
        <button class="layui-btn" lay-submit lay-filter="add" id="addSubmitBtn">添加</button>
        <button class="layui-btn" lay-submit lay-filter="update" id="updateSubmitBtn">修改</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>

</form>
<%--模态框结束--%>

</body>
</html>
